<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：标签编辑-->
<div th:fragment="budgetincomeTagsEdit" class="modal inmodal fade" id="budgetincomeTagsEdit_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="budgetincomeTagsEdit_modalTitle">收入标签</h4>
                <p id="budgetincomeTagsEdit_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <table id="budgetincomeTagsEdit_table" class="table table-striped"></table>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                标签编辑
                            </div>
                            <div class="card-body">
                                <form id="budgetincomeTagsEdit_Form">
                                    <input id="budgetincomeTagsEdit_id" name="id" type="hidden"/>
                                    <div class="form-group">
                                        <label for="budgetincomeTagsEdit_tagName">标签</label>
                                        <input class="form-control" id="budgetincomeTagsEdit_tagName"
                                               name="tagName"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="budgetincomeTagsEdit_tagValue">内容</label>
                                        <input class="form-control" id="budgetincomeTagsEdit_tagValue"
                                               name="tagValue"/>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-primary m-t-n-xs" type="submit">
                                            保存
                                        </button>
                                        <button id="budgetincomeTagsEdit_btn_new" type="button" class="btn btn-warning m-t-n-xs">
                                            新增
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            budgetincomeTagsEditObj.myTable = $('#budgetincomeTagsEdit_table').bootstrapTable({
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '标签',
                    width: '100',
                    field: 'tagName'
                }, {
                    title: '内容',
                    field: 'tagValue'
                }, {
                    title: '操作',
                    width: 160,
                    events: {
                        'click .edit': function (e, value, row, index) {
                            budgetincomeTagsEditObj.fillForm(row)
                        },
                        'click .trash': function (e, value, row, index) {
                            budgetincomeTagsEditObj.deleteHandle(row.id)
                        }
                    },
                    formatter: function (value, row, index) {
                        var opers = [];
                        opers.push(`<a class="edit btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="编辑">
                                    <i class="fa fa-edit"></i>
                                </a>`)
                        opers.push(`<a class="trash btn btn-white btn-bitbucket text-success" data-toggle="tooltip" title="删除">
                                    <i class="fa fa-trash"></i>
                                </a>`)
                        return opers.join('');
                    }
                }],
                responseHandler: function (res) {
                    return {
                        total: res.page.totalCount,
                        rows: res.page.list
                    };
                },
                onLoadSuccess: function (data) {
                    $('[data-toggle="tooltip"]').tooltip()
                }
            });
            budgetincomeTagsEditObj.myForm.validate({
                rules: budgetincomeTagsEditObj.dataRule,
                submitHandler: function (form) {
                    budgetincomeTagsEditObj.dataFormSubmit(form);
                }
            });
            $('#budgetincomeTagsEdit_btn_new').on('click', function () {
                budgetincomeTagsEditObj.cleanForm()
            });
        })
        var budgetincomeTagsEditObj = new Object({
            incomeId: undefined,
            myTable: undefined,
            myForm: $('#budgetincomeTagsEdit_Form'),
            myModal: $('#budgetincomeTagsEdit_Modal'),
            dataRule: {
                tagName: {
                    required: true,
                    maxlength: 20
                },
                tagValue: {
                    maxlength: 200
                }
            },
            init: function (id) {
                this.incomeId = id;
                this.refreshDataList();
                this.cleanForm();
                budgetincomeTagsEditObj.myModal.modal('show');
            },
            refreshDataList: function () {
                budgetincomeTagsEditObj.myTable.bootstrapTable('refresh', {
                    url: '/budget/budgetincometag/list',
                    query: {
                        incomeId: this.incomeId
                    }
                });
            },
            cleanForm: function () {
                this.myForm[0].reset();
                $("input[type='hidden']").val("");
            },
            fillForm: function (data) {
                for (let key in data) {
                    if (this.myForm.find(`[name=${key}]`).length > 0) {
                        this.myForm.find(`[name=${key}]`).val(data[key])
                    }
                }
            },
            dataFormSubmit: function (form) {
                let _self = this;
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                data['incomeId'] = this.incomeId;
                $.myPost({
                    url: `/budget/budgetincometag/${data.id ? 'update' : 'save'}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.refreshDataList();
                            _self.cleanForm();
                            budgetincomeListObj.refreshDataList();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            deleteHandle: function (id) {
                let _self = this;
                $.mySwalConfirm(`将删除标签，确认吗？`, function () {
                    $.myDelete({
                        url: `/budget/budgetincometag/delete`,
                        dataType: "json",
                        data: [id],
                        success: function (data) {
                            if (data && data.code === 0) {
                                toastr.success(data.msg, '操作提示')
                                _self.refreshDataList();
                                _self.cleanForm();
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                });
            }
        })
    </script>

</div>
</body>
</html>